<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<button>0</button>
<button>1</button>
<button>2</button>
</body>
<script>
	// 点击某个按钮, 提示"点击的是第n个按钮"
	const btns = document.querySelectorAll("button");
	// for(var i=0;i<btns.length;i++){
	// 	btns[i].onclick = function(){
	// 		alert(i);
	// 	}
	// }
	// 以上for循环相当于：
	// var i = 0;
	// btns[i].onclick = function(){
	// 	alert(i);
	// }
	// i++;// 1
	// btns[i].onclick = function(){
	// 	alert(i);
	// }
	// i++;// 2
	// btns[i].onclick = function(){
	// 	alert(i);
	// }
	// i++;// 3
	
	// 解决方案1：
	// for(let i=0;i<btns.length;i++){
	// 	btns[i].onclick = function(){
	// 		alert(i);
	// 	}
	// }
	// 相当于：
	// {
	// 	let i = 0;
	// 	btns[i].onclick = function () {
	// 		alert(i);
	// 	}
	// }
	// {
	// 	let i = 1;
	// 	btns[i].onclick = function () {
	// 		alert(i);
	// 	}
	// }
	// {
	// 	let i = 2;
	// 	btns[i].onclick = function () {
	// 		alert(i);
	// 	}
	// }
	
	// 理解
	// {
	// 	function my(i){
	//
	// 		if(i<btns.length){
	// 			btns[i].onclick = function(){
	// 				alert(i);
	// 			}
	// 			my(i+1);
	// 		}
	//
	// 	}
	// 	my(0);
	// }
	
	
	// 解决方案2
	// for(var i=0;i<btns.length;i++){
	// 	btns[i].index = i;
	// 	btns[i].onclick = function(){
	// 		alert(this.index);
	// 	}
	// }
	
	// 解决方案3
	// for(var i=0;i<btns.length;i++){
	// 	btns[i].onclick = (function(i){
	// 		return function(){
	// 			alert(i);
	// 		}
	// 	})(i);
	// }
	
	// 解决方案4:// 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包.
	btns.forEach(function (btn,index){
		// 0
		btn.onclick = function(){
			alert(index);
		}
	})
	
	// (function(btn,index){
	// 	btn.onclick = function(){
	// 		alert(index);
	// 	}
	// })(btns[0],0);
	//
	// (function(btn,index){
	// 	btn.onclick = function(){
	// 		alert(index);
	// 	}
	// })(btns[1],1);
	//
	// (function(btn,index){
	// 	btn.onclick = function(){
	// 		alert(index);
	// 	}
	// })(btns[2],2);
</script>
</html>